<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>css3实现全屏轮播</title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		ul,li{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#header, #header .ct{
			height: 100%;
		}
		#header .ct{
			position: relative;
		}
		#header .ct >li{
			position: absolute;
			opacity: 0;
			width: 100%;
			height: 100%;
		}
		#header .main{
			position: absolute;
			width: 600px;
			left: 50%;
			top: 50%;
			z-index: 1;
			transform: translate(-50%,-50%);
			color: #fff;
			text-align: center; 
		}
		.cover-bg1{
			background-image: url(image/img1.jpg);
			height: 100%;
		}
		.cover-bg2{
			background-image: url(image/img2.jpg);
			height: 100%;
		}
		.cover-bg3{
			background-image: url(image/img3.jpg);
			height: 100%;
		}
		@keyframes slide {
	        0% {opacity: 0}
	        5% {opacity: 1}
	        28% {opacity: 1}
	        33.3% {opacity: 0;}
        }
        #header .ct > li:nth-child(1){
            animation: slide 15s linear 0s infinite;
        }
        #header .ct > li:nth-child(2){
            animation: slide 15s linear 5s infinite;
        }
        #header .ct > li:nth-child(3){
            animation: slide 15s linear 10s infinite;
        }
        .content{
        	font-size: 20px;
        	line-height: 20px;
        }
	</style>
</head>
<body>
  <div id="header">
  	<ul class="ct">
  		<li class="item">
  			<div class="cover cover-bg1"></div>
  			<div class="main">
  				<h3>人生并非虚耗</h3> 
  				<p>何来尘埃飞舞</p>
  			</div>
  		</li>

  		<li class="item">
			<div class="cover cover-bg2"></div>
			<div class="main">
				<h3>没有歌</h3>
				<p>怎敢说心事</p>
			</div>
	    </li>

	  	<li class="item">
			<div class="cover cover-bg3"></div>
			<div class="main">
				<h3>你的背包</h3>
				<p>让我走得好缓慢</p>
			</div>
	    </li>
  	</ul>
  </div>

  <div class="content">
  	<p>今天是周几</p>
  </div>

</body>
</html>